<template>
  <div class="city_group">
    <van-index-bar :index-list="indexList">
      <!-- 热门 -->
      <van-index-anchor index="热门"></van-index-anchor>
      <div class="list">
        <template v-for="(city, index) in cityData.hotCities">
          <div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
        </template>
      </div>
      <!-- 城市 -->
      <template v-for="(group, index) in cityData.cities" :key="index">
        <van-index-anchor :index="group.group" />
        <template v-for="(city, indey) in group.cities" :key="indey">
          <van-cell :title="city.cityName" @click="cityClick(city)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import useCityStore from '@/stores/modeules/city'

// 默认值
const props = defineProps({
  cityData: {
    type: Object,
    default: () => ({})
  }
})

// 侧边添加
const indexList = computed(() => {
  const list = props.cityData.cities.map(item => item.group)
  list.unshift('#')
  return list
})

// 城市选择
const router = useRouter()
const cityStore = useCityStore()
const cityClick = city => {
  console.log(city)
  cityStore.currentCity = city
  // 返回上一级
  router.back()
}
</script>

<style scoped lang="scss">
.list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 5px;
  margin-right: 35px;
  .city {
    width: 70px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #000;
    background-color: #fff4ec;
    border-radius: 18px;
    padding: 10px;
    margin: 2px;
  }
}
</style>
